<template>
  <Card
    class="card-wrap h-full relative overflow-hidden"
    :body-style="{ padding: 0, margin: 0 }"
    :style="styles"
  >
    <Tree
      :selectedKeys="selectedKeys"
      v-model:expanded-keys="expandedKeys"
      :tree-data="treeData"
      :field-names="fileNames"
      default-expand-all
      @select="onSelect"
      style="width: 280px"
    />
    <div class="close" @click="onClose">
      <CaretRightOutlined v-if="isClose" />
      <CaretLeftOutlined v-else />
    </div>
  </Card>
</template>

<script setup lang="tsx">
import { CSSProperties, PropType, computed, nextTick, ref, watch } from 'vue';
import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
import { Card, Tree, TreeProps } from 'ant-design-vue';
import { noop, treeToArray, treeToEnum } from '@/utils/utils';
import { fetchStationTree } from '@/api/station';

defineOptions({
  name: 'StationTree',
});

const props = defineProps({
  search: {
    type: Function as PropType<(params: Record<string, any>) => void>,
    default: noop,
  },
  centerStationId: {
    type: String,
    default: '',
  },
  stationTypeId: {
    type: String,
    default: '',
  },
});

const selectedKeys = computed(() => {
  const result = ['0', props.centerStationId, props.stationTypeId]
    .filter((item) => !!item)
    .join('_');
  return [result];
});

const expandedKeys = ref<string[]>([]);
const treeEnum = ref<Record<string, any>>({});
const treeData = ref([]);
const fileNames: TreeProps['fieldNames'] = {
  title: 'name',
  key: 'key',
  children: 'children',
};

const onSelect: TreeProps['onSelect'] = (_, item) => {
  const params: Record<string, any> = {};
  if (item.node.type === '3') {
    //  点击站点类型
    // stationTypeId
    params['stationTypeId'] = String(item.node.id);
    params['centerStationId'] = String(item.node.parent!.node.id);
  } else if (item.node.type === '2') {
    // 点击中心站
    // centerStationId
    params['centerStationId'] = String(item.node.id);
  }
  props.search(params);
};

const isClose = ref<boolean>(false);
const styles = computed<CSSProperties>(() =>
  isClose.value
    ? {
        width: '10px',
        border: 0,
      }
    : { width: '280px' },
);
const onClose = () => {
  isClose.value = !isClose.value;
};

const formatTree = (
  tree: { key: any; id: any; children: any }[],
  parentKey?: string,
) => {
  return tree.map((item: { key: any; id: any; children: any }) => {
    item.key = parentKey ? `${parentKey}_${item.id}` : `${item.id}`;
    item.id += '';
    if (item.children?.length) {
      item.children = formatTree(item.children, item.key);
    }
    return item;
  });
};

const initData = () => {
  fetchStationTree().then((res) => {
    const list = formatTree([
      {
        ...(res.data as any),
        id: 0,
      },
    ]);
    treeData.value = list as any;
    expandedKeys.value = treeToArray(list, {
      label: 'name',
      value: 'key',
    }).map((item) => item.value);

    treeEnum.value = treeToEnum(list, {
      label: 'key',
      value: 'id',
    });
  });
};

initData();
</script>
